<template>
  <div class="Login03Box">
    <div class="loginMain">
      <div class="L_left">
        <div class="Left_title">监控管理系统</div>
        <!-- Tab切换--srart -->
        <div class="tabBox">
          <div
            :class="{ highLight: whichIndex == index }"
            v-for="(item, index) in tabs"
            :key="index"
            @click="
              whichIndex = index;
              componentId = item.componentId;
            "
          >
            {{ item.componentName }}
          </div>
        </div>
        <div class="tabs_content">
          <keep-alive>
            <component :is="componentId"></component>
          </keep-alive>
        </div>
        <!-- Tab切换--end -->
      </div>
      <div class="R_Right"></div>
    </div>
  </div>
</template>
<script>
import one from "@/components/Login03/LoginPhone.vue";
import two from "@/components/Login03/LoginEmail.vue";
export default {
  name: "myLogin03",
  components: {
    one,
    two,
  },
  data() {
    return {
      whichIndex: 0,
      componentId: "one",
      tabs: [
        {
          componentName: "手机号",
          componentId: "one",
        },
        {
          componentName: "邮箱",
          componentId: "two",
        },
      ],
    };
  },
  mounted() {},
  methods: {},
};
</script>
<style lang='scss' scoped>
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
.Login03Box {
  width: 100vw;
  height: 100vh;
  background: url("../assets/BackgroundImg/login3.png") no-repeat 0 0/100% 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .loginMain {
    width: 900px;
    height: 600px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: white;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    .L_left {
      width: 350px;
      height: 400px;
      .Left_title {
        width: 100%;
        height: 50px;
        line-height: 50px;
        text-align: center;
        font-weight: bold;
        font-size: 24px;
      }
      .tabBox {
        width: 100px;
        height: 40px;
        line-height: 40px;
        display: flex;
        justify-content: space-between;
        cursor: pointer;
      }
      .highLight {
        border-bottom: 2px solid #409eff;
        color: #409eff;
      }
      .tabs_content {
        width: 100%;
        height: 330px;
      }
    }
    .R_Right {
      width: 442px;
      height: 442px;
      background: url("../assets/BackgroundImg/login3BigLogi.png") no-repeat 0 0 /100%
        100%;
    }
  }
}
</style>